<template>
    <div class="goodsList" style="overflow: scroll;">
        
        <div class="search_box">
            <form action="/">
                <van-search
                    v-model="search_for"
                    placeholder="请输入搜索关键词"
                    show-action
                    @search="onSearch"
                    @cancel="onCancel"
                />
            </form>
        </div>
 

        <div class="goods_box">
            
                <div class="goods_card" v-for="(item, index) in goods_list" :key="index">
                    <router-link :to="'/home/goodsInfo/'+ item.id">
                        <img :src="item.img_url" alt="">
                        <div class="goods_card_title">{{item.title}}</div>
                        <div class="goods_card_price">￥：{{item.sell_price}}<span> 线下价：{{item.market_price}}</span>
                        </div>
                        <div class="goods_card_zhaiyao">{{item.zhaiyao}}</div>
                        <div class="goods_card_add_time">{{item.add_time | dateFormat('YYYY-MM-DD')}}</div>
                   </router-link>
                </div>
            
            
           
        </div>
        <mt-button type="primary" size='large' @click="get_more_goods()">加载更多</mt-button>


    </div>  
</template>
<script>
import {Toast} from 'mint-ui'
import comment from '../comment.vue'
export default {
    data(){
        return{
            search_for:'',
            goods_list:[],
            pageindex:1
           
        }
    },
    methods:{
        onSearch(){

        },
        onCancel(){
            this.search_for='';
           
        },
        get_goods_list(pageindex){
            this.$axios('api/getgoods?pageindex='+pageindex)
            .then(response=>{
                if(response.data.message.length!=0)
                    this.goods_list=this.goods_list.concat(response.data.message);
                else
                    Toast({
                        message:'暂无新数据！'
                    })
            })
            .catch(error=>{
                Toast({
                    message:'请求错误'+error
                })
            })
        },
        get_more_goods(){
            this.get_goods_list(++this.pageindex);
        }
    },
    created(){
       this.get_goods_list(1);
    },
    components:{
        
    }
}
</script>
<style  lang="scss" scoped>
$img_size:110px;
 .goodsList{
    .search_box{
        height: 30px;
        width: 100%;
        position: fixed;
        top: 40px;
        z-index:99;
        border: 1px;

        ::v-deep input[type="search"]{
            text-align: left;
            margin-top: 5px;
            margin-bottom: 5px;
        }
         ::v-deep .van-field__left-icon .van-icon, .van-field__right-icon .van-icon{
            margin-top: 10px;
        }
    }
    .goods_box{
        margin-top: 120px;
        padding: 3px;
        .goods_card{
            height: 120px;
            width: 100%;;
            box-shadow: 0 0 1px #999;
            border-radius: 5px;
            padding: 5px;
            margin-right: 5px;
            margin-bottom: 5px;
            position: relative;
            margin: 0;
            padding: 0;
            img{
                height: $img_size;
                width: $img_size;
                border-radius: 10px;
                size: 100%;
                border-radius: 3px;
                margin: 5px;

            }
            .goods_card_title{
                position: absolute;
                left: 120px;
                top: 10px;
                width: 100%;
                font-size: 15px;
                
                max-height: 40px;
                line-height: 20px;
               
            }
            .goods_card_price{
                position:absolute;
                font-size:15px;
                max-height: 20px;
                left: 120px;
                top: 50px;
                color:  #FF2400;
                letter-spacing: 2px;
                line-height: 15px;
                span{
                    font-size: 10px;
                    text-decoration: line-through;
                    line-height: 10px;

                }
            }
            .goods_card_zhaiyao{
                position:absolute;
                font-size: 13px;
                line-height: 20px;
                left: 120px;
                top: 65px;
                color: lightgray;
                max-height: 40px;
                overflow: hidden;
            }
            .goods_card_add_time{
                position:absolute;
                font-size:13px;
                left: 120px;
                top: 103px;
                line-height: 15px;
                color: lightgray;
            }
        }

    }


}

</style>